<template>
  <div class="contract-tracking-detail">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-left">
        <button class="btn btn-back" @click="goBack">
          <i class="icon-back"></i> 返回
        </button>
        <h1>合同追踪详情</h1>
      </div>
      <div class="header-right">
        <button class="btn btn-primary" @click="refreshData">
          <i class="icon-refresh"></i> 刷新
        </button>
        <button class="btn btn-success" @click="showAddLogModal = true">
          <i class="icon-add"></i> 添加日志
        </button>
      </div>
    </div>

    <div v-if="loading" class="loading-container">
      <div class="loading-spinner"></div>
      <p>加载中...</p>
    </div>

    <div v-else-if="detailData" class="detail-content">
      <!-- Tab切换 -->
      <div class="tabs">
        <div 
          :class="['tab-item', { active: activeTab === 'info' }]" 
          @click="activeTab = 'info'"
        >
          基本信息
        </div>
        <div 
          :class="['tab-item', { active: activeTab === 'map' }]" 
          @click="activeTab = 'map'"
        >
          地图追踪
        </div>
        <div 
          :class="['tab-item', { active: activeTab === 'timeline' }]" 
          @click="activeTab = 'timeline'"
        >
          追踪日志
        </div>
        <div 
          :class="['tab-item', { active: activeTab === 'stations' }]" 
          @click="activeTab = 'stations'"
        >
          到站记录
        </div>
      </div>

      <!-- Tab内容 -->
      <div class="tab-content">
        <!-- 基本信息 -->
        <div v-show="activeTab === 'info'" class="info-section">
          <!-- 合同信息 -->
          <div class="info-card">
            <h3>合同信息</h3>
            <div class="info-grid">
              <div class="info-item">
                <label>合同编号：</label>
                <span>{{ detailData.contractInfo.contractNumber }}</span>
              </div>
              <div class="info-item">
                <label>合同标题：</label>
                <span>{{ detailData.contractInfo.contractTitle }}</span>
              </div>
              <div class="info-item">
                <label>合同类型：</label>
                <span class="badge badge-type">{{ detailData.contractInfo.contractType }}</span>
              </div>
              <div class="info-item">
                <label>合同方：</label>
                <span>{{ detailData.contractInfo.ownerName }}</span>
              </div>
              <div class="info-item">
                <label>签订日期：</label>
                <span>{{ formatDate(detailData.contractInfo.signingDate) }}</span>
              </div>
              <div class="info-item">
                <label>合同金额：</label>
                <span class="amount">¥{{ formatAmount(detailData.contractInfo.contractAmount) }}</span>
              </div>
              <div class="info-item">
                <label>异常状态：</label>
                <span 
                  :class="['badge', detailData.contractInfo.hasAbnormal ? 'badge-danger' : 'badge-success']"
                >
                  {{ detailData.contractInfo.hasAbnormal ? '异常' : '正常' }}
                </span>
              </div>
              <div class="info-item">
                <label>当前状态：</label>
                <span>{{ detailData.contractInfo.currentStatus }}</span>
              </div>
            </div>
          </div>

          <!-- 订单信息 -->
          <div v-if="detailData.contractInfo.orderInfo" class="info-card">
            <h3>订单信息</h3>
            <div class="info-grid">
              <div class="info-item">
                <label>订单号：</label>
                <span>{{ detailData.contractInfo.orderInfo.orderNumber }}</span>
              </div>
              <div class="info-item">
                <label>货物名称：</label>
                <span>{{ detailData.contractInfo.orderInfo.itemName }}</span>
              </div>
              <div class="info-item">
                <label>数量：</label>
                <span>{{ detailData.contractInfo.orderInfo.quantity }}</span>
              </div>
              <div class="info-item">
                <label>总重量：</label>
                <span>{{ detailData.contractInfo.orderInfo.totalWeight }} kg</span>
              </div>
              <div class="info-item">
                <label>总体积：</label>
                <span>{{ detailData.contractInfo.orderInfo.totalVolume }} m³</span>
              </div>
            </div>
          </div>

          <!-- 路线信息 -->
          <div v-if="detailData.routeInfo" class="info-card">
            <h3>路线信息</h3>
            <div class="info-grid">
              <div class="info-item">
                <label>起点：</label>
                <span>{{ detailData.routeInfo.startingPoint }}</span>
              </div>
              <div class="info-item">
                <label>起点地址：</label>
                <span>{{ detailData.routeInfo.startAddress }}</span>
              </div>
              <div class="info-item">
                <label>终点：</label>
                <span>{{ detailData.routeInfo.destination }}</span>
              </div>
              <div class="info-item">
                <label>终点地址：</label>
                <span>{{ detailData.routeInfo.destinationAddress }}</span>
              </div>
              <div class="info-item">
                <label>总距离：</label>
                <span>{{ detailData.routeInfo.totalDistance }}</span>
              </div>
              <div class="info-item">
                <label>预计时间：</label>
                <span>{{ detailData.routeInfo.estimatedTime }}</span>
              </div>
            </div>
          </div>

          <!-- 车辆信息 -->
          <div v-if="detailData.contractInfo.vehicles && detailData.contractInfo.vehicles.length > 0" class="info-card">
            <h3>车辆信息</h3>
            <div class="vehicles-list">
              <div 
                v-for="vehicle in detailData.contractInfo.vehicles" 
                :key="vehicle.vehicleId" 
                class="vehicle-card"
              >
                <div class="vehicle-header">
                  <h4>{{ vehicle.licensePlateNumber }}</h4>
                  <div class="vehicle-badges">
                    <span :class="['badge', 'badge-' + getLocationStatusClass(vehicle.locationStatus)]">
                      {{ vehicle.locationStatus }}
                    </span>
                    <span :class="['badge', 'badge-' + getTransportStatusClass(vehicle.transportStatus)]">
                      {{ vehicle.transportStatus }}
                    </span>
                  </div>
                </div>
                <div class="vehicle-info">
                  <div class="info-item">
                    <label>品牌型号：</label>
                    <span>{{ vehicle.brandAndModel }}</span>
                  </div>
                  <div class="info-item">
                    <label>车辆类型：</label>
                    <span>{{ vehicle.vehicleType }}</span>
                  </div>
                  <div class="info-item">
                    <label>车主：</label>
                    <span>{{ vehicle.ownerName }}</span>
                  </div>
                  <div class="info-item">
                    <label>车辆状态：</label>
                    <span>{{ vehicle.vehicleStatus }}</span>
                  </div>
                  <div class="info-item">
                    <label>当前位置：</label>
                    <span>{{ vehicle.currentLocationDesc }}</span>
                  </div>
                  <div class="info-item">
                    <label>坐标：</label>
                    <span>{{ vehicle.currentLatitude }}, {{ vehicle.currentLongitude }}</span>
                  </div>
                  <div class="info-item">
                    <label>更新时间：</label>
                    <span>{{ formatDateTime(vehicle.lastUpdateTime) }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 地图追踪 -->
        <div v-show="activeTab === 'map'" class="map-section">
          <div class="map-container">
            <div id="tracking-map" class="map"></div>
          </div>
          <div class="map-legend">
            <h4>图例说明</h4>
            <div class="legend-item">
              <span class="legend-icon start"></span>
              <span>起点</span>
            </div>
            <div class="legend-item">
              <span class="legend-icon end"></span>
              <span>终点</span>
            </div>
            <div class="legend-item">
              <span class="legend-icon vehicle"></span>
              <span>车辆当前位置</span>
            </div>
            <div class="legend-item">
              <span class="legend-icon station"></span>
              <span>途经站点</span>
            </div>
          </div>
        </div>

        <!-- 追踪日志时间轴 -->
        <div v-show="activeTab === 'timeline'" class="timeline-section">
          <div v-if="detailData.trackingLogs && detailData.trackingLogs.length > 0" class="timeline">
            <div 
              v-for="(log, index) in detailData.trackingLogs" 
              :key="log.id" 
              :class="['timeline-item', { abnormal: log.isAbnormal }]"
            >
              <div class="timeline-dot"></div>
              <div class="timeline-content">
                <div class="timeline-header">
                  <span class="timeline-time">{{ formatDateTime(log.eventTime) }}</span>
                  <span v-if="log.isAbnormal" class="badge badge-danger">异常</span>
                </div>
                <div class="timeline-description">{{ log.eventDescription }}</div>
                <div class="timeline-meta">
                  <span>车牌号: {{ log.licensePlateNumber }}</span>
                  <span>位置: {{ log.locationDesc || `${log.locationLat}, ${log.locationLng}` }}</span>
                </div>
              </div>
            </div>
          </div>
          <div v-else class="empty-timeline">
            <p>暂无追踪日志</p>
          </div>
        </div>

        <!-- 到站记录 -->
        <div v-show="activeTab === 'stations'" class="stations-section">
          <div v-if="detailData.stationRecords && detailData.stationRecords.length > 0">
            <table class="data-table">
              <thead>
                <tr>
                  <th>站点序号</th>
                  <th>站点名称</th>
                  <th>到达时间</th>
                  <th>离开时间</th>
                  <th>停留时长(分钟)</th>
                  <th>位置坐标</th>
                  <th>状态</th>
                  <th>备注</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="station in detailData.stationRecords" :key="station.stationIndex">
                  <td>{{ station.stationIndex }}</td>
                  <td>{{ station.stationName }}</td>
                  <td>{{ formatDateTime(station.arrivalTime) }}</td>
                  <td>{{ station.departureTime ? formatDateTime(station.departureTime) : '-' }}</td>
                  <td>{{ station.stayDuration }}</td>
                  <td>{{ station.locationLat }}, {{ station.locationLng }}</td>
                  <td>
                    <span :class="['badge', 'badge-' + getStationStatusClass(station.status)]">
                      {{ station.status }}
                    </span>
                  </td>
                  <td>{{ station.remarks || '-' }}</td>
                </tr>
              </tbody>
            </table>
          </div>
          <div v-else class="empty-stations">
            <p>暂无到站记录</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 添加日志弹窗 -->
    <div v-if="showAddLogModal" class="modal-overlay" @click.self="showAddLogModal = false">
      <div class="modal-container">
        <div class="modal-header">
          <h3>添加追踪日志</h3>
          <button class="btn-close" @click="showAddLogModal = false">×</button>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label>事件时间 *</label>
            <input 
              v-model="newLog.eventTime" 
              type="datetime-local" 
              class="form-control" 
            />
          </div>
          <div class="form-group">
            <label>事件描述 *</label>
            <textarea 
              v-model="newLog.eventDescription" 
              class="form-control" 
              rows="3"
              placeholder="请输入事件描述"
            ></textarea>
          </div>
          <div class="form-group">
            <label>车牌号 *</label>
            <input 
              v-model="newLog.licensePlateNumber" 
              type="text" 
              class="form-control" 
              placeholder="请输入车牌号"
            />
          </div>
          <div class="form-row">
            <div class="form-group">
              <label>纬度 *</label>
              <input 
                v-model.number="newLog.locationLat" 
                type="number" 
                step="0.000001"
                class="form-control" 
                placeholder="如：39.9042"
              />
            </div>
            <div class="form-group">
              <label>经度 *</label>
              <input 
                v-model.number="newLog.locationLng" 
                type="number" 
                step="0.000001"
                class="form-control" 
                placeholder="如：116.4074"
              />
            </div>
          </div>
          <div class="form-group">
            <label>
              <input v-model="newLog.isAbnormal" type="checkbox" />
              标记为异常
            </label>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" @click="showAddLogModal = false">取消</button>
          <button class="btn btn-primary" @click="submitNewLog">提交</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { contractTrackingApi } from '@/api'
import type { ContractTrackingDetail } from '@/types/api'
import { ElMessage } from 'element-plus'

const route = useRoute()
const router = useRouter()

// 合同ID和类型
const contractId = ref(parseInt(route.params.id as string))
const contractType = ref((route.query.contractType as string) || '货主合同')

// Tab状态
const activeTab = ref((route.query.tab as string) || 'info')

// 详情数据
const detailData = ref<ContractTrackingDetail | null>(null)
const loading = ref(false)

// 添加日志弹窗
const showAddLogModal = ref(false)
const newLog = reactive({
  eventTime: '',
  eventDescription: '',
  locationLat: 0,
  locationLng: 0,
  licensePlateNumber: '',
  isAbnormal: false
})

// 地图实例
let mapInstance: any = null

// 加载详情数据
const loadDetail = async () => {
  loading.value = true
  try {
    const response = await contractTrackingApi.getContractTrackingDetail(
      contractId.value, 
      contractType.value
    )
    
    if (response.code === 200 && response.data) {
      detailData.value = response.data
      
      // 如果当前是地图tab，初始化地图
      if (activeTab.value === 'map') {
        setTimeout(() => initMap(), 300)
      }
    } else {
      ElMessage.error(response.message || '查询失败')
    }
  } catch (error: any) {
    console.error('加载合同追踪详情失败:', error)
    ElMessage.error(error.message || '加载失败，请稍后重试')
  } finally {
    loading.value = false
  }
}

// 初始化地图
const initMap = () => {
  // 这里需要集成高德地图，参考项目中的 AMapPicker.vue
  // 由于需要引入高德地图SDK，这里提供伪代码框架
  
  console.log('初始化地图...')
  
  // TODO: 集成高德地图
  // 1. 加载地图
  // 2. 标注起点、终点
  // 3. 标注车辆当前位置
  // 4. 标注途经站点
  // 5. 绘制路线
  
  // 示例代码（需要根据实际高德地图API调整）:
  /*
  if ((window as any).AMap) {
    const AMap = (window as any).AMap
    
    mapInstance = new AMap.Map('tracking-map', {
      zoom: 6,
      center: [116.4074, 39.9042]
    })
    
    // 添加标记点
    if (detailData.value?.contractInfo.vehicles) {
      detailData.value.contractInfo.vehicles.forEach(vehicle => {
        new AMap.Marker({
          position: [vehicle.currentLongitude, vehicle.currentLatitude],
          title: vehicle.licensePlateNumber,
          map: mapInstance
        })
      })
    }
  }
  */
}

// 刷新数据
const refreshData = () => {
  loadDetail()
}

// 返回列表
const goBack = () => {
  router.push({ name: 'ContractTrackingList' })
}

// 提交新日志
const submitNewLog = async () => {
  // 验证
  if (!newLog.eventTime || !newLog.eventDescription || !newLog.licensePlateNumber) {
    ElMessage.warning('请填写必填项')
    return
  }
  
  if (!newLog.locationLat || !newLog.locationLng) {
    ElMessage.warning('请填写有效的坐标')
    return
  }
  
  try {
    const response = await contractTrackingApi.addTrackingLog({
      contractId: contractId.value,
      eventTime: newLog.eventTime,
      eventDescription: newLog.eventDescription,
      locationLat: newLog.locationLat,
      locationLng: newLog.locationLng,
      licensePlateNumber: newLog.licensePlateNumber,
      isAbnormal: newLog.isAbnormal
    })
    
    if (response.code === 200) {
      ElMessage.success('添加成功')
      showAddLogModal.value = false
      
      // 重置表单
      newLog.eventTime = ''
      newLog.eventDescription = ''
      newLog.locationLat = 0
      newLog.locationLng = 0
      newLog.licensePlateNumber = ''
      newLog.isAbnormal = false
      
      // 刷新数据
      loadDetail()
    } else {
      ElMessage.error(response.message || '添加失败')
    }
  } catch (error: any) {
    console.error('添加追踪日志失败:', error)
    ElMessage.error(error.message || '添加失败，请稍后重试')
  }
}

// 格式化日期
const formatDate = (dateStr: string) => {
  if (!dateStr) return '-'
  const date = new Date(dateStr)
  return date.toLocaleDateString('zh-CN')
}

// 格式化日期时间
const formatDateTime = (dateStr: string) => {
  if (!dateStr) return '-'
  const date = new Date(dateStr)
  return date.toLocaleString('zh-CN', { 
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}

// 格式化金额
const formatAmount = (amount: number) => {
  if (!amount) return '0.00'
  return amount.toLocaleString('zh-CN', {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2
  })
}

// 获取定位状态样式类
const getLocationStatusClass = (status: string) => {
  const statusMap: Record<string, string> = {
    '有定位': 'success',
    '无定位': 'danger',
    '定位中': 'warning'
  }
  return statusMap[status] || 'secondary'
}

// 获取运输状态样式类
const getTransportStatusClass = (status: string) => {
  const statusMap: Record<string, string> = {
    '未出发': 'secondary',
    '运输中': 'primary',
    '已到达': 'success',
    '异常': 'danger'
  }
  return statusMap[status] || 'secondary'
}

// 获取站点状态样式类
const getStationStatusClass = (status: string) => {
  const statusMap: Record<string, string> = {
    '未到达': 'secondary',
    '已到达': 'warning',
    '已离开': 'success'
  }
  return statusMap[status] || 'secondary'
}

// 监听tab切换
watch(activeTab, (newTab) => {
  if (newTab === 'map' && detailData.value) {
    setTimeout(() => initMap(), 300)
  }
})

// 组件挂载
onMounted(() => {
  loadDetail()
})
</script>

<style scoped>
.contract-tracking-detail {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header-left,
.header-right {
  display: flex;
  align-items: center;
  gap: 15px;
}

.page-header h1 {
  margin: 0;
  font-size: 24px;
  color: #333;
}

.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.btn-back {
  background-color: #909399;
  color: white;
}

.btn-back:hover {
  background-color: #a6a9ad;
}

.btn-primary {
  background-color: #409eff;
  color: white;
}

.btn-primary:hover {
  background-color: #66b1ff;
}

.btn-secondary {
  background-color: #909399;
  color: white;
}

.btn-secondary:hover {
  background-color: #a6a9ad;
}

.btn-success {
  background-color: #67c23a;
  color: white;
}

.btn-success:hover {
  background-color: #85ce61;
}

.loading-container {
  text-align: center;
  padding: 60px 20px;
  color: #909399;
  background: white;
  border-radius: 8px;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #409eff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 20px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.detail-content {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.tabs {
  display: flex;
  border-bottom: 1px solid #e4e7ed;
  background-color: #fafafa;
}

.tab-item {
  padding: 15px 30px;
  cursor: pointer;
  font-size: 14px;
  color: #606266;
  transition: all 0.3s;
  border-bottom: 2px solid transparent;
}

.tab-item:hover {
  color: #409eff;
}

.tab-item.active {
  color: #409eff;
  border-bottom-color: #409eff;
  background-color: white;
}

.tab-content {
  padding: 20px;
}

/* 基本信息 */
.info-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.info-card {
  border: 1px solid #ebeef5;
  border-radius: 8px;
  padding: 20px;
}

.info-card h3 {
  margin: 0 0 15px 0;
  font-size: 16px;
  color: #333;
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 10px;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 15px;
}

.info-item {
  display: flex;
  align-items: center;
  font-size: 14px;
}

.info-item label {
  color: #909399;
  min-width: 100px;
}

.info-item span {
  color: #606266;
}

.amount {
  color: #f56c6c;
  font-weight: 600;
}

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 500;
}

.badge-type {
  background-color: #e8f4ff;
  color: #409eff;
}

.badge-success {
  background-color: #f0f9ff;
  color: #67c23a;
}

.badge-primary {
  background-color: #ecf5ff;
  color: #409eff;
}

.badge-warning {
  background-color: #fdf6ec;
  color: #e6a23c;
}

.badge-danger {
  background-color: #fef0f0;
  color: #f56c6c;
}

.badge-secondary {
  background-color: #f4f4f5;
  color: #909399;
}

.vehicles-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 15px;
}

.vehicle-card {
  border: 1px solid #ebeef5;
  border-radius: 6px;
  padding: 15px;
  background-color: #fafafa;
}

.vehicle-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e4e7ed;
}

.vehicle-header h4 {
  margin: 0;
  font-size: 16px;
  color: #333;
}

.vehicle-badges {
  display: flex;
  gap: 5px;
}

.vehicle-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 地图 */
.map-section {
  display: flex;
  gap: 20px;
}

.map-container {
  flex: 1;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  overflow: hidden;
}

.map {
  width: 100%;
  height: 600px;
  background-color: #f5f7fa;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #909399;
}

.map-legend {
  width: 200px;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  padding: 15px;
}

.map-legend h4 {
  margin: 0 0 15px 0;
  font-size: 14px;
  color: #333;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 13px;
  color: #606266;
}

.legend-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.legend-icon.start {
  background-color: #67c23a;
}

.legend-icon.end {
  background-color: #f56c6c;
}

.legend-icon.vehicle {
  background-color: #409eff;
}

.legend-icon.station {
  background-color: #e6a23c;
}

/* 时间轴 */
.timeline-section {
  max-width: 1000px;
  margin: 0 auto;
}

.timeline {
  position: relative;
  padding-left: 40px;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: #e4e7ed;
}

.timeline-item {
  position: relative;
  margin-bottom: 30px;
}

.timeline-dot {
  position: absolute;
  left: -31px;
  top: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #409eff;
  border: 2px solid white;
  box-shadow: 0 0 0 2px #409eff;
}

.timeline-item.abnormal .timeline-dot {
  background-color: #f56c6c;
  box-shadow: 0 0 0 2px #f56c6c;
}

.timeline-content {
  background-color: #fafafa;
  border: 1px solid #ebeef5;
  border-radius: 6px;
  padding: 15px;
}

.timeline-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.timeline-time {
  font-size: 13px;
  color: #909399;
}

.timeline-description {
  font-size: 14px;
  color: #333;
  margin-bottom: 10px;
  line-height: 1.6;
}

.timeline-meta {
  font-size: 12px;
  color: #909399;
  display: flex;
  gap: 20px;
}

.empty-timeline,
.empty-stations {
  text-align: center;
  padding: 60px 20px;
  color: #909399;
}

/* 到站记录表格 */
.stations-section {
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 1000px;
}

.data-table th,
.data-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #ebeef5;
}

.data-table th {
  background-color: #f5f7fa;
  font-weight: 600;
  color: #333;
  font-size: 14px;
}

.data-table td {
  font-size: 13px;
  color: #606266;
}

.data-table tbody tr:hover {
  background-color: #f5f7fa;
}

/* 弹窗 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-container {
  background: white;
  border-radius: 8px;
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #ebeef5;
}

.modal-header h3 {
  margin: 0;
  font-size: 18px;
  color: #333;
}

.btn-close {
  background: none;
  border: none;
  font-size: 28px;
  color: #909399;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.3s;
}

.btn-close:hover {
  background-color: #f5f7fa;
  color: #333;
}

.modal-body {
  padding: 20px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 20px;
  border-top: 1px solid #ebeef5;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
  color: #666;
  font-size: 14px;
}

.form-control {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
  transition: border-color 0.3s;
  box-sizing: border-box;
}

.form-control:focus {
  outline: none;
  border-color: #409eff;
}

textarea.form-control {
  resize: vertical;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}
</style>

